import {designPage, reactive, useRefs} from "plain-design-composition";
import data200 from '../../../data/data-200.json';
import {$message, Adc, AdcCheckbox, AdcColorPicker, AdcDate, AdcIndex, AdcInput, AdcInputNumber, AdcRate, AdcSwitch, AntdTable, Button, ButtonGroup, Form, FormItem, iAdtNode, iAdtRowRenderScope, Switch} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";

export default designPage(() => {

  const { refs, onRef } = useRefs({
    AntdTable: AntdTable
  });

  const state = reactive({
    data: data200,
    editNodes: [] as iAdtNode[],
    virtualFlag: true,

    onDblClickRow({ node }: iAdtRowRenderScope) {
      if (!node.state.edit) {
        node.enableEdit();
        state.editNodes.push(node);
      }
    },
    saveEdit: async () => {
      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
      if (validates.length > 0) {
        console.log(validates);
        const { validateResultData, node: { state: { index } } } = validates[0]!;
        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
        return;
      }
      // todo 网络保存逻辑
      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
      state.editNodes.forEach(tableNode => tableNode.closeEdit());
      state.editNodes = [];
    },
    cancelEdit: () => {
      state.editNodes.forEach(tableNode => {
        tableNode.cancelEdit();
      });
      state.editNodes = [];
    },
  });

  return () => (
    <div>
      <DemoRow title={'基本用法'}>
        <Form column={1}>
          <FormItem label={'开启虚拟滚动'}>
            <Switch v-model={state.virtualFlag}/>
          </FormItem>
          <FormItem label="导出">
            <ButtonGroup style={{ margin: '4px 0' }}>
              <Button label="导出原始数据" onClick={() => console.log(refs.AntdTable!.methods.getSourceData())}/>
              <Button label="导出显示数据" onClick={() => refs.AntdTable!.methods.getShowData().then(val => console.log(val))}/>
            </ButtonGroup>
          </FormItem>
          <FormItem label={'编辑'}>
            <ButtonGroup disabled={state.editNodes.length === 0}>
              <Button onClick={state.saveEdit} label={'保存编辑'}/>
              <Button onClick={state.cancelEdit} label={'取消编辑'}/>
            </ButtonGroup>
          </FormItem>
        </Form>
      </DemoRow>
      <DemoRow title={'行内编辑'}>
        <AntdTable
          virtual={state.virtualFlag}
          dataSource={state.data}
          onRowDoubleClick={state.onDblClickRow}
          ref={onRef.AntdTable}
          showRows={10}
          pagination={false}
        >
          <AdcIndex/>
          <Adc dataIndex="id" title="编号"/>
          <Adc dataIndex="name" title="普通文本列"/>
          <AdcInput dataIndex="name" title="文本框" required/>
          <AdcInputNumber dataIndex={'size'} title={'数字框'}/>
          <AdcDate dataIndex={'date'} title={'日期'}/>
          <AdcColorPicker dataIndex={'color'} title={'颜色'}/>
          <AdcRate dataIndex={'star'} title={'评分'}/>
          <AdcSwitch dataIndex={'flag'} title={'开关'}/>
          <AdcCheckbox dataIndex={'flag'} title={'开关'}/>
        </AntdTable>
      </DemoRow>
    </div>
  );
});
